import { Popup, Form, Selector } from 'antd-mobile-v5';
import { Dispatch, SetStateAction } from 'react';
import styles from './form.less';
import { params } from '../interface';
export default function Screen(props: {
  visible: boolean;
  setVisible: Dispatch<SetStateAction<boolean>>;
  setParams: Dispatch<SetStateAction<params>>;
  setData: Dispatch<SetStateAction<string[]>>;
  setHasMore: Dispatch<SetStateAction<boolean>>;
}) {
  const { visible, setVisible, setParams, setData, setHasMore } = props;
  const [form] = Form.useForm();
  const options = [
    {
      label: '新手',
      value: '新手',
    },
    {
      label: '店铺运营',
      value: '店铺运营',
    },
    {
      label: '服饰装饰',
      value: '服饰装饰',
    },
    {
      label: '数据运营',
      value: '数据运营',
    },
    {
      label: '体验中心',
      value: '体验中心',
    },
  ];
  const onSubmit = () => {
    setHasMore(true);
    setData([]);
    const { tags } = form.getFieldsValue();
    setParams((val: params) => ({ ...val, tags, pageNo: 0, username: '' }));
    setVisible(false);
  };
  const onReset = () => {
    setHasMore(true);
    setData([]);
    setParams((val: params) => ({ ...val, tags: [], pageNo: 0, username: '' }));
    setVisible(false);
    form.resetFields();
  };

  return (
    <>
      <Popup
        visible={visible}
        onMaskClick={() => {
          setVisible(false);
        }}
        position="right"
        bodyStyle={{ width: '60vw' }}
      >
        <Form
          form={form}
          footer={
            <div className={styles['form-footer']}>
              <button className={styles['sure']} onClick={onSubmit}>
                确定
              </button>
              <button className={styles['reset']} onClick={onReset}>
                重置
              </button>
            </div>
          }
        >
          <Form.Item name="tags" label="运营方向">
            <Selector
              style={{
                '--text-color': '#757575',
                '--border-radius': '4px',
                '--checked-color': '#ff4f03',
                '--padding': '8px 24px',
                '--checked-text-color': '#fff',
              }}
              options={options}
              multiple={true}
            />
          </Form.Item>
        </Form>
      </Popup>
    </>
  );
}
